<template>
    <scroll-view scroll-y="true" class="scroll-wrap" :scroll-into-view="viewId">
        <image class="theme" src="@/pages/compoundPages/static/posterPage/template0/theme.jpg" mode="widthFix"></image>
        <view class="list-wrap">
            <view class="item-group" v-for="(item, index) in modeList" :key="index">
                <view class="item" v-for="(item2, index2) in item" :key="index2" :class="`item` + index2" :id="'item' + index + '-' + index2">
                    <LazyImage
                        v-if="item2.image_url_c"
                        class="photo"
                        :class="`photo` + item2.imageIndex"
                        :imageStyle="item2.imageIndex == 0 ? photoStyles[index].imageStyle : photoStyles[1].imageStyle"
                        :src="item2.image_url_c"
                        mode="aspectFill"
                    ></LazyImage>
                    <view
                        v-else
                        class="photo-empty"
                        :class="`photo` + item2.imageIndex"
                    ></view>
                    <image class="flower" v-if="item2.imageIndex === 1" src="@/pages/compoundPages/static/posterPage/template0/flower.png" mode="widthFix"></image>
                    <image class="mode" :src="`../static/posterPage/template0/mode` + item2.imageIndex + `.png`" mode="widthFix"></image>
                </view>
            </view>
        </view>
        <BottomCode></BottomCode>
    </scroll-view>
</template>
<script>
import BottomCode from './BottomCode.vue';
import LazyImage from '@/components/LazyImage/index.vue';
import { mapList } from '@/common/utils.js';
export default {
    name: 'ScrollWrap',
    data() {
        return {
            viewId: '',
            modeList: [],
            modeArr: [1, 2, 1, 2, 2, 1],
            defaultPhotoPath: require('../static/posterPage/default.png'),
            photoStyles: [
                {
                    imageStyle: {
                        borderRadius: '100%'
                    }
                },
                {
                    imageStyle: {
                        borderRadius: '10rpx'
                    }
                }
            ]
        };
    },
    props: {
        photosList: {
            type: Array,
            default: function() {
                return [];
            }
        }
    },
    computed: {},
    created() {},
    methods: {
        getList() {
            this.modeList = mapList(this.modeArr, this.photosList, this.defaultPhotoPath);
            this.modeList = mapList(this.modeArr, this.photosList);
        }
    },
    watch: {
        photosList: {
            handler(newVal, oldVal) {
                if (newVal.length > 0) {
                    this.getList();
                }
            },
            immediate: true,
            deep: true
        }
    },
    components: { LazyImage, BottomCode }
};
</script>
<style lang="scss" scoped>
.scroll-wrap {
    height: 100vh;
    .theme {
        width: 100%;
    }
    .list-wrap {
        width: 660rpx;
        margin: 45rpx 45rpx 0;
        background: #fff0f0;
        border-radius: 10rpx;
        .item-group {
            width: 100%;
            position: relative;
            .item {
                width: 100%;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 1;
                .mode {
                    position: relative;
                    width: 750rpx;
                    left: 50%;
                    top: 0;
                    transform: translate(-50%, 0);
                }

            }
            .item0 {
                position: relative;
                left: 0;
                top: 0;
            }
        }
        .photo {
            position: absolute;
            border-radius: 10rpx;
            z-index: 2;
        }
        .photo-empty {
            position: absolute;
            border-radius: 10rpx;
            z-index: 2;
            background: #ccc;
        }
        .photo0 {
            left: 130rpx;
            top: 110rpx;
            width: 390rpx;
            height: 390rpx;
            border-radius: 100%;
        }
        .photo1 {
            left: 66rpx;
            top: 68rpx;
            width: 220rpx;
            height: 332rpx;
        }
        .flower {
            position: absolute;
            left: 15rpx;
            top: 284rpx;
            width: 169rpx;
            height: 43rpx;
            z-index: 3;
        }
        .photo2 {
            left: 384rpx;
            top: 68rpx;
            width: 220rpx;
            height: 332rpx;
        }
        .photo3 {
            left: 102rpx;
            top: 104rpx;
            width: 462rpx;
            height: 298rpx;
        }
        .photo4 {
            left: 52rpx;
            top: 104rpx;
            width: 308rpx;
            height: 206rpx;
        }
        .photo5 {
            left: 310rpx;
            top: 252rpx;
            width: 308rpx;
            height: 206rpx;
            z-index: 2;
        }

        .photo6 {
            left: 72rpx;
            top: 58rpx;
            width: 220rpx;
            height: 332rpx;
        }
        .photo7 {
            left: 406rpx;
            top: 224rpx;
            width: 162rpx;
            height: 204rpx;
        }
        .photo8 {
            left: 264rpx;
            top: 150rpx;
            width: 344rpx;
            height: 220rpx;
        }
    }
}
</style>
